<template>
	<view class="search-popup">
		<view class="search">
			 <input class="search-inp" confirm-type="search" placeholder="请输入姓名" v-model="page.username" @confirm="searchProject"/>
			 <text class="search-btn" @click="searchProject">
				 <i class="iconfont iconsousuo"></i>
			 </text>
		</view>
		<view class="search-list">
      <scroll-view scroll-y class="peoplelist">
        <view class="search-list__item" v-for="(item,index) in peopleListData" :key="index" >
          <text @click="gotoPeopleInfo(item)">{{ item.username }}</text>
					<text @click="gotoAddress(item)">定位</text>
        </view>
      </scroll-view>
		</view>
	</view>
</template>

<script>
	import { getPeopleList } from '@/common/api/map'
	export default {
		name: 'searchPopup',
		data() {
		  return {
				page: {
					username:""
				},
				peopleListData: []
		  };
		},
		mounted() {
			this.loadPeopleList();
		},
		methods: {
			loadPeopleList() {
				getPeopleList(this.page).then((res)=> {
					if(res.code == 20000){
						this.peopleListData = res.data
					}else{
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
					}
				})
			},
			searchProject() {
				this.loadPeopleList();
			},
			gotoPeopleInfo(point) {
				uni.navigateTo({
					url: `/pages/peopleInfo/peopleInfo?userId=${point.userId}&userName=${point.username}&phone=${point.phone}`
				})
			},
			gotoAddress(point) {
				if(point.longitude == null || point.latitude == null){
					uni.showToast({
						title: '人员暂无经纬度信息',
						icon: 'none'
					})
				}else{
					this.$root.$viewer.goView({
						longitude: Number(point.longitude),
						latitude: Number(point.latitude),
						height: 1000
					});
					this.$emit('closePopup', 'search')
					this.$emit('openPeoplePop', point)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.search-popup{
		position: relative;
		height: 600rpx;
		background: rgba(5, 38, 102, .8);
		box-shadow: 0px -1px 10px 0px rgba(0, 146, 255, 0.6);
		border-radius: 10px 10px 0px 0px;
		>.search{
			display: flex;
			height: 70rpx;
			padding: 30rpx 40rpx;
			>.search-inp{
				flex: 1;
				height: 100%;
				padding-left: 10rpx;
				color: #fff;
				font-size: 28rpx;
        text-indent: 10rpx;
        box-shadow: 0px -1px 10px 0px rgba(0, 146, 255, 0.8) inset;
        .uni-input-input, .uni-input-placeholder{
          font-size: 28rpx;
          color: #eee ;
        }
			}
			>.search-btn{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100rpx;
				height: 100%;
        box-shadow: 0px -1px 10px 0px rgba(0, 146, 255, 0.8) inset;
				border-left: none;
				i{
					color: #00FFFF;
					font-size: 32rpx;
				}
			}
		}
		>.search-list{
      height: calc(100% - 160rpx);
			padding: 0 30rpx;
      .peoplelist{
        height: 100%;
        /deep/ .uni-scroll-view::-webkit-scrollbar{
          width: 1px;
        }
        /deep/ .uni-scroll-view::-webkit-scrollbar-thumb{
         background: #00FFFF;
        }
      }
			.search-list__item{
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 64rpx;
				line-height: 64rpx;
				color: #fff;
				font-size: 24rpx;
				border-bottom: 1px solid #133050;
				z-index: 10;
				>text:first-child{
					width: 90%;
					height: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				>text:last-child{
					position: relative;
					width: 10%;
					height: 40rpx;
					line-height: 40rpx;
					background: #226cbb;
					color: #fff;
					font-size: 22rpx;
					text-align: right;
					border-radius: 10rpx;
					margin-right: 20rpx;
					z-index: 11;
					text-align: center;
				}
			}
		}
		>.search-page{
			position: absolute;
			bottom: 20rpx;
			display: flex;
			justify-content: center;
			width: 100%;
			/deep/ .uni-pagination__num-current-text{
				color: #fff;
			}
		}
	}
</style>
